<template>
  <div>
    <!-- 单标签 -->
    <child4 />
    <hr />
    <!-- 使用双标签来替换，定义插槽区域内容 -->
    <child4>
      <h1>aaaaaaaaaaaaaa</h1>
      <!-- vue2.6之前作用域插槽它只能在 template中标签中用,之后就可以任意标签 -->
      <template slot-scope="scope">
        <li>ID：{{ scope.row.id }} -- 姓名：{{ scope.row.name }}</li>
      </template>

      <!-- 调用具名插槽 -->
      <footer slot="footer">我是底部</footer>
    </child4>
  </div>
</template>

<script>
import child4 from "./components/child4";
// 插槽
// 作用：提高组件的复用能力

export default {
  data() {
    return {};
  },
  components: {
    child4,
  },
};
</script>

<style lang='scss' scoped>
</style>